<mat-card class="app-table" fxLayout="column" #apptable>
  <mat-toolbar-row>
    <h3 class="title" *ngIf="title">{{ title }}</h3>
    <div class="actions">
      <button mat-button color="default" class="action-icon" *ngIf="tableConf.add" (click)="tableConf.add()">{{ 'Add' | translate }}</button>
    </div>
</mat-toolbar-row>
<mat-card-content class="table-container">
  <div class="table-container" #table>
    <table mat-table [dataSource]="displayedDataSource" class="table-component">
      <!-- Info Column -->
      <ng-container [matColumnDef]="column.name" *ngFor="let column of tableConf.columns">
        <th mat-header-cell *matHeaderCellDef> {{column.name}} </th>
        <td mat-cell *matCellDef="let element">
          <div class="table-cell">
            <div *ngIf="column.state && column.state.prop && tableConf.getInOutInfo" class="state-info">
              <mat-icon [id]="element[idProp]" class="state-info-icon" svgIcon="network-upload-download" *ngIf="unifyState(element[column.state.prop]) === 'STATE_UP'" [matTooltip]="showInOutInfo(element)" [class]="unifyState(element[column.state.prop])"></mat-icon>
              <mat-icon class="state-info-icon" svgIcon="network-upload-download-disabled" *ngIf="unifyState(element[column.state.prop]) === 'STATE_DOWN'" [class]="unifyState(element[column.state.prop])"></mat-icon>
            </div>
            <mat-icon class="state-icon" *ngIf="column.state && column.state.icon" [class]="unifyState(element[column.prop])">
              {{column.state.icon}}</mat-icon>
            <ul *ngIf="column.listview; else textView">
              <li *ngFor="let item of element[column.prop]"> {{item}} </li>
            </ul>
            <ng-template #textView>
              {{element[column.prop]}}
            </ng-template>
          </div>
        </td>
      </ng-container>

      <!-- Action Column -->
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element">
          <div class="table-cell table-row-action">
            <button mat-icon-button (click)="deleteRow(element)" *ngIf="tableConf.deleteCall">
              <mat-icon class="table-action-button">delete</mat-icon>
            </button>
            <span *ngFor="let rowAction of actions">
              <div *ngIf="!tableConf.isActionVisible || tableConf.isActionVisible(rowAction.name, element)">
                <mat-spinner [diameter]='40' *ngIf="element['onChanging']; else actionButtons"></mat-spinner>
                <ng-template #actionButtons>
                  <button mat-icon-button (click)="rowAction.onClick(element)" >
                    <mat-icon class="table-action-button">{{rowAction.icon}}</mat-icon>
                  </button>
                </ng-template>
              </div>
            </span>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns" [hidden]="hideHeader"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="editRow(row)"></tr>
    </table>
  </div>
  <div class="view-more-row" *ngIf="showViewMore" (click)="openViewMore()">View More</div>
  <div class="view-more-row" *ngIf="showCollapse" (click)="collapse()">Collapse</div>
</mat-card-content>
</mat-card>